@require "../../../css/variables.styl"
@require "../../../css/mixin.styl"

.va-df-rate
  display inline-block
  margin 0
  padding 0
  font-size 20px
  vertical-align middle
  font-weight normal
  font-style normal
  outline none
  .va-df-rate-star
    line-height $height-df-input-default
  &:focus:not(.va-df-rate-disabled)
    .va-df-rate-star:before
      text-shadow: 1px 1px 4px $color-df-input-border-focus

  &-disabled
    cursor not-allowed
    .va-df-rate-star
      &:before,
      &-content:before
        cursor not-allowed

      &:hover
        transform scale(1)



  &-star
    display inline-block
    margin 0
    padding 0
    margin-right 8px
    position relative
    font-family $font-name
    transition all 0.3s ease

    &:hover
      transform scale(1.1)


    &:before,
    &-content:before
      color #e9e9e9
      cursor pointer
      content "\e803" // vafonts va-icon-star
      transition all $time-df-transition ease-in-out
      display block


    &-content
      position absolute
      left 0
      top 0
      width 50%
      height 100%
      overflow hidden
      &:before
        color transparent



    &-half &-content:before,
    &-full:before
      color $color-df-rate-star


    &-half:hover &-content:before,
    &-full:hover:before
      color tint($color-df-rate-star, 20%)


  &-text
    margin-left 8px
    vertical-align middle
    display inline-block
    font-size 12px


